<template>
  <div class="user-info" @mouseenter="isShowUserInfo=true" @mouseleave="isShowUserInfo=false">
    <a href="javascript:;">
      <img
        :src="(data.user.imgsrc&&data.user.name)?require(`@/assets/images/head/${data.user.imgsrc}`):require(`@/assets/images/head/no-login.png`)"
      />
    </a>
    <transition name="isShow">
      <div class="user-more" v-if="isShowUserInfo">
        <div class="u-detail" v-if="data.user.name">
          <div class="info-up">
            <div class="info-img">
              <img :src="require(`@/assets/images/head/${data.user.imgsrc}`)" />
              <span>{{data.user.Lv}}</span>
            </div>
            <div class="info-right">
              <p>{{data.user.name}}</p>
              <p>
                开通白金会员尽享尊贵权益
                <a href="javascript:;">开通</a>
              </p>
              <p>
                积分:
                <span>68.0</span>
                同福币:
                <span>0</span>
                <a href="javascript:;">充值</a>
              </p>
            </div>
          </div>
          <div class="info-middel user-menu">
            <a href="javascript:;" v-for="(item,index) of Data.infoMenu" :key="index">
              <i :class="'iconfont icon-'+item.icon"></i>
              {{item.text}}
            </a>
          </div>
          <div class="info-foot">
            <a href="javascript:;">
              <i class="iconfont icon-tuichu"></i>
              退出
            </a>
          </div>
        </div>
        <div class="u-none" v-else>
          <span>- 登录后可专享 -</span>
          <div class="u-none-list user-menu">
            <a href="javascript:;" v-for="(item,index) of Data.noneMenu" :key="index">
              <i :class="'iconfont icon-'+item.icon"></i>
              {{item.text}}
            </a>
          </div>
          <div class="u-none-submit">
            <a href="javascript:;">登录</a>
            <a href="javascript:;">注册</a>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import {
    reactive
} from 'vue'
import Data from '@/configs/head/user'
export default {
    name: "User",
    data() {
        return {
            isShowUserInfo:false,
        }
    },
    props: {
        data: Object,
    },
    setup(props) {
        return {
            Data
        }
    }
}
</script>

<style lang="scss" scoped>
.user-info {
  height: 40px;
  position: relative;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .user-more {
    width: auto !important;
    height: auto !important;
    min-width: 300px;
    min-height: 200px;

    position: absolute;
    top: 40px;
    right: 0;
    transition: all 0.2s;
    background-color: #fff;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1);

    &::after {
      content: "";
      position: absolute;
      top: -6px;
      right: 5px;
      font-size: 0;
      line-height: 0;
      border-width: 6px;
      border-color: #fff;
      border-top-width: 0;
      border-style: dashed;
      border-bottom-style: solid;
      border-left-color: transparent;
      border-right-color: transparent;
    }
    .user-menu {
      margin-top: 10px;
      text-align: center;
      a {
        display: inline-block;
        padding: 0 20px;
        height: 90px;
        margin: 5px;
        text-align: center;
        border-radius: 5px;
        background-color: #f2f2f2;
        i {
          display: block;
          margin-top: 25px;
          color: $ThemeColor;
          font-weight: bolder;
        }
      }
    }

    .u-detail {
      .info-up {
        width: 410px;
        padding: 20px 30px 0px 30px;
        height: 125px;

        .info-img,
        .info-right {
          float: left;
        }

        .info-img {
          width: 100px;
          height: 100px;
          text-align: center;
          user-select: none;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }

          span {
            padding: 4px 8px;
            font-size: 12px;
            background-color: #f1ba26;
            color: #fff;
            border-radius: 20px;
            width: 100%;
          }
        }

        .info-right {
          margin: 20px 0px 0px 20px;
          width: 290px;

          p {
            margin-top: 20px;

            a {
              color: #fff;
              background-color: $ThemeColor;
              padding: 3px 9px;
              border-radius: 20px;
              font-size: 12px;
              float: right;
              margin-top: -2px;
            }

            span {
              margin-right: 30px;
            }
          }

          p:first-child {
            margin-top: 0;
            color: #333;
            font-size: 18px !important;
            font-weight: bolder;

            &::after {
              display: block;
              height: 0;
            }
          }
        }
      }

      .info-foot {
        height: 40px;
        line-height: 40px;
        background-color: #f2f2f2;
        a {
          margin-right: 10px;
          float: right;
          color: #666 !important;
          font-size: 14px;
          i {
            font-weight: bolder;
          }
        }
      }
    }

    .u-none {
      padding: 20px 10px 0px 10px;
      text-align: center;
      span {
        font-size: 14px;
        color: #666;
      }

      .u-none-list {
        width: 342px;
        a {
          padding: 0px 10px;
          background-color: transparent;

          i {
            margin-bottom: 5px;
          }
        }
      }

      .u-none-submit {
        a:first-child {
          color: #fff;
          background-color: $ThemeColor;
        }
        a {
          margin: 0px 10px;
          display: inline-block;
          width: 80px;
          height: 35px;
          border-radius: 35px;
          line-height: 35px;
          text-align: center;
          background-color: #dfdfdf;
          color: #666;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }
}

.isShow-enter-active,
.isShow-leave-active {
  transition: opacity 0.5s;
}
.isShow-enter-to,
.isShow-leave {
  opacity: 1;
}

.isShow-enter,
.isShow-leave-to {
  opacity: 0;
}

.icon-sq {
  &::after {
    content: "SQ";
    border: 1px solid;
    border-radius: 50%;
    padding: 1px;
    font-size: 12px;
  }
}
</style>
